<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>今日生机论坛--贴子发布模块</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
		<link rel="icon" href="../favicon.ico">
		
		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
		<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.5.1.min.js"></script>
		<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
	</head>
	<body>
		<!-- 头部模块 -->
		<div id="head"></div>
		<!-- 正文模块 -->
		<div class="container bg-white w-100 rounded shadow pt-4 pb-5">
			<div class="col-12">
				<form role="form">
				  <div class="form-group h5">
				    <label class="text-primary">贴子主题</label>
				    <input type="text" class="form-control col-6" placeholder="请输入贴子主题" name="articleTitle">
				  </div>
				  <div class="form-group">
				    <label class="text-primary">贴子正文</label>
					<textarea class="form-control" rows="10" placeholder="请输入贴子正文" name="articleContent"></textarea>
				  </div>
				  <div class="form-group">
				    <label>上传配图</label>
				    <input type="file"><!--th:value="${list.labelId}"-->
				  </div><!--th:text="${list.labelName}"-->
				  <div class="form-group">
					  <select class="form-control col-2" name="labelId">
						  <option>请选择分区</option>
						  <div th:each="list,listIter:${list}">
							  <option th:value="${list.labelId}" th:text="${list.labelName}"></option>
						  </div>

				    </select>
				  </div>
				  <button type="submit" class="btn btn-primary">发布</button>
				</form>
			</div>
		</div>
		
		<script>
			$().ready(function(){
				$("#head").load("/test/head");
			});
			$('form').submit(function (e) {
				// 阻止表单的提交和页面的跳转
				e.preventDefault();
				$.ajax({
					url: '/article/add',
					method: "POST",
					data: JSON.stringify(form2Json($("form").serialize())),
					contentType: "application/json",
					success: function (returnObject) {
						if (returnObject.code=="1") {
							alert(returnObject.message);
							window.location.href = "/user/logon";
							// alert("success");
						} else {
							alert(returnObject.message + ",请重新登录！");
						}
					}
				});

			});
			// ?username=tom&password=tom转{"username":"tom","password":"tom"}格式
			function form2Json(str) {
				var arr = str.split('&');
				var obj = {};
				for (var i = 0; i < arr.length; i++) {
					var bits = arr[i].split('=');
					obj[bits[0]] = bits[1];
				}
				str = '';
				for (key in obj) {
					str += key + '=' + obj[key] + '&';
				}
				str = str.slice(0, str.length - 1);
				return obj;
			}
		</script>
	</body>
</html>